import { GoodField } from '@/views/components/TableGoods';
import NumText from '@/pages/OrderModule/common/components/CommonText/components/NumText';
import Typography from '@/pages/OrderModule/common/components/Typography';
import Style from './index.module.less';
import CommonInputNumber from '@/pages/OrderModule/common/components/CommonInputNumber/index.jsx';
import CommonTag from '@/components/CommonTag/index.jsx';
import {Button, Popconfirm} from 'antd';

export function useOrderItemColumns() {
  const orderItemColumns  = [
    {
      title: '图片',
      dataIndex: 'image',
      width: 56,
      render: (value, record) => {
        return (
            <GoodField
                record={{
                  image: record.image,
                }}
                config={{
                  image: 'small',
                  info: [],
                }}
            />
        );
      }
    },
    {
      title: '商品名称/款式编码/商品编码',
      dataIndex: 'field2',
      width: 251,
      render: (value, record) => {
        return (
            <GoodField
                record={{
                  name: record.skuName,
                  color: record.color,
                  goods: record.spuCode,
                  style: record.skuCode,
                }}
                config={{
                  image: 'none',
                  info: ['name', 'color', 'goods', 'style'],
                }}
            />
        );
      }
    },
    {
      title: '数量',
      dataIndex: 'goodsNum',
      width: 80,
      render: (text, record, index) => <CommonInputNumber value={text} onBlur={e => handleNumChange(e, index)} placeholder="请输入数量" controls={false} />
    },
    {
      title: '供应商',
      dataIndex: 'storeName',
      width: 120,
    },
    {
      title: '采购价',
      dataIndex: 'goodsPrice',
      width: 100,
      render: (text, { memberPrice }) => {
        return (<>
          <div className='common-color9'>￥{text}</div>
          {Boolean(memberPrice) && <CommonTag type='isVipGoods' />}
        </>)
      }
    },
    {
      title: '金额',
      dataIndex: 'amount',
      width: 100,
      render: (text, { goodsNum, goodsPrice }) => `￥${text}`
    },
    {
      title: '操作',
      dataIndex: 'operator',
      width: 80,
      fixed:'right',
      render: (t, r, i) => {
        return (
            <Popconfirm
                title="是否确认删除该商品？"
                onConfirm={() => handleDeleteGoods(i)}
                okText="确定"
                cancelText="取消"
            >
              <Button type="text">
                <Typography type="primary">删除</Typography>
              </Button>
            </Popconfirm>
        );
      }
    },
  ];

  return {
    orderItemColumns,
  };
}
